<template>
  <div class="c-table-test">
    <h3>CTable 组件测试</h3>

    <!-- 基本用法 -->
    <div class="test-section">
      <h4>1. 基本用法</h4>
      <CTable title="基础表格" :data="basicData" :columns="basicColumns" />
    </div>

    <!-- 带分页功能的表格 -->
    <div class="test-section">
      <h4>2. 带分页功能的表格</h4>
      <CTable
        title="分页表格"
        :data="pagedData"
        :columns="basicColumns"
        :page-size="5"
        pagination
      />
    </div>

    <!-- 带操作列的表格 -->
    <div class="test-section">
      <h4>3. 带操作列的表格</h4>
      <CTable title="操作列表格" :data="basicData" :columns="columnsWithActions">
        <template #action="{ row }">
          <el-button size="small" type="primary" @click="handleEdit(row)">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDelete(row)">删除</el-button>
        </template>
        <template #status="{ row }">
          <el-tag :type="getStatusTagType(row.status)">{{ getStatusText(row.status) }}</el-tag>
        </template>
      </CTable>
    </div>

    <!-- 编辑模式下的表格 -->
    <div class="test-section">
      <h4>4. 编辑模式下的表格</h4>
      <CTable title="编辑模式表格" :data="editableData" :columns="editableColumns" edit />
      <el-button style="margin-top: 10px" @click="saveEditableData">保存修改</el-button>
    </div>

    <!-- 带自定义header和button插槽的表格 -->
    <div class="test-section">
      <h4>5. 带自定义header和button插槽的表格</h4>
      <CTable title="自定义插槽表格" :data="basicData" :columns="basicColumns">
        <template #header>
          <span class="custom-header"> - 这是自定义header内容</span>
        </template>
        <template #button>
          <el-button type="primary" @click="handleAdd">添加数据</el-button>
          <el-button @click="handleRefresh">刷新数据</el-button>
        </template>
      </CTable>
    </div>

    <!-- 复杂列配置表格 -->
    <div class="test-section">
      <h4>6. 复杂列配置表格</h4>
      <CTable title="复杂列配置表格" :data="complexData" :columns="complexColumns">
        <template #customRender="{ row }">
          <div class="custom-render-cell">
            <img :src="row.avatar" alt="Avatar" class="avatar" />
            <span>{{ row.name }}</span>
          </div>
        </template>
        <template #status="{ row }">
          <el-tag :type="getStatusTagType(row.status)">{{ getStatusText(row.status) }}</el-tag>
        </template>
      </CTable>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import CTable from '../CTable/CTable.vue'
import { ElMessage } from 'element-plus'

// 基本表格数据
const basicData = ref([
  { id: 1, name: '张三', age: 28, address: '北京市朝阳区' },
  { id: 2, name: '李四', age: 32, address: '上海市浦东新区' },
  { id: 3, name: '王五', age: 45, address: '广州市天河区' },
  { id: 4, name: '赵六', age: 22, address: '深圳市南山区' },
  { id: 5, name: '钱七', age: 36, address: '杭州市西湖区' },
])

// 分页表格数据 (生成20条数据)
const pagedData = ref(
  Array.from({ length: 20 }, (_, i) => ({
    id: i + 1,
    name: `用户${i + 1}`,
    age: 20 + Math.floor(Math.random() * 30),
    address: `地址${i + 1}`,
  })),
)

// 可编辑数据
const editableData = ref(
  JSON.parse(JSON.stringify(basicData.value)).map((item) => ({
    ...item,
    email: `${item.name.toLowerCase()}@example.com`,
  })),
)

// 复杂数据
const complexData = ref([
  {
    id: 1,
    name: '张三',
    position: '前端开发工程师',
    department: '研发部',
    salary: 15000,
    joinDate: '2022-01-15',
    status: 1,
    avatar: 'https://picsum.photos/40/40?random=1',
  },
  {
    id: 2,
    name: '李四',
    position: '产品经理',
    department: '产品部',
    salary: 20000,
    joinDate: '2021-05-20',
    status: 1,
    avatar: 'https://picsum.photos/40/40?random=2',
  },
  {
    id: 3,
    name: '王五',
    position: 'UI设计师',
    department: '设计部',
    salary: 18000,
    joinDate: '2022-03-10',
    status: 0,
    avatar: 'https://picsum.photos/40/40?random=3',
  },
])

// 基本列配置
const basicColumns = ref([
  { prop: 'id', label: 'ID', width: 80 },
  { prop: 'name', label: '姓名', width: 120 },
  { prop: 'age', label: '年龄', width: 80 },
  { prop: 'address', label: '地址' },
])

// 带操作列的配置
const columnsWithActions = ref([
  { prop: 'id', label: 'ID', width: 80 },
  { prop: 'name', label: '姓名', width: 120 },
  { prop: 'age', label: '年龄', width: 80 },
  { prop: 'address', label: '地址' },
  {
    prop: 'status',
    label: '状态',
    width: 100,
    myType: 'slot',
    slotName: 'status',
  },
  {
    label: '操作',
    width: 180,
    fixed: 'right',
    myType: 'slot',
    slotName: 'action',
  },
])

// 可编辑列配置
const editableColumns = ref([
  { prop: 'id', label: 'ID', width: 80 },
  { prop: 'name', label: '姓名', width: 120, myType: 'el-input' },
  { prop: 'age', label: '年龄', width: 80, myType: 'el-input-number' },
  { prop: 'address', label: '地址', myType: 'el-input' },
  { prop: 'email', label: '邮箱', myType: 'el-input' },
])

// 复杂列配置
const complexColumns = ref([
  { prop: 'id', label: 'ID', width: 80 },
  {
    prop: 'name',
    label: '姓名',
    width: 150,
    myType: 'slot',
    slotName: 'customRender',
  },
  { prop: 'position', label: '职位', width: 180 },
  { prop: 'department', label: '部门', width: 120 },
  {
    prop: 'salary',
    label: '薪资',
    width: 120,
    formatter: (row: any) => `¥${row.salary.toLocaleString()}`,
  },
  {
    prop: 'joinDate',
    label: '入职日期',
    width: 120,
  },
  {
    prop: 'status',
    label: '状态',
    width: 100,
    myType: 'slot',
    slotName: 'status',
  },
])

// 操作方法
const handleEdit = (row: any) => {
  console.log('编辑:', row)
  ElMessage.success(`编辑用户 ${row.name}`)
}

const handleDelete = (row: any) => {
  console.log('删除:', row)
  ElMessage.warning(`删除用户 ${row.name}`)
}

const saveEditableData = () => {
  console.log('保存编辑数据:', editableData.value)
  ElMessage.success('数据保存成功')
}

const handleAdd = () => {
  const newId = Math.max(...basicData.value.map((item) => item.id)) + 1
  basicData.value.push({
    id: newId,
    name: `新用户${newId}`,
    age: 25,
    address: '新地址',
  })
  ElMessage.success('添加数据成功')
}

const handleRefresh = () => {
  ElMessage.info('数据已刷新')
}

// 辅助方法
const getStatusTagType = (status: number) => {
  return status === 1 ? 'success' : 'warning'
}

const getStatusText = (status: number) => {
  return status === 1 ? '在职' : '离职'
}
</script>

<style lang="scss" scoped>
.c-table-test {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  height: 100%;
  overflow: auto;
}

h3 {
  margin-bottom: 20px;
  color: #333;
  font-size: 20px;
}

h4 {
  margin-bottom: 15px;
  color: #666;
  font-size: 16px;
  padding-left: 10px;
  border-left: 4px solid #409eff;
}

.test-section {
  margin-bottom: 30px;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.custom-header {
  color: #666;
  font-size: 14px;
}

.custom-render-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
</style>
